<template>
  <div class="tabs-container">
    <div class="btns">
      <!-- <el-button class="btn" type="primary" @click="handleOpen('add')">
        新增
      </el-button> -->
      <!-- <el-button class="btn" @click="handleOpen('create')">生成编码</el-button>
      <el-button class="btn" @click="handleOpen('setCode')">设置编码</el-button> -->
      <el-button class="btn" type="primary" @click="handleOpen('out')">
        出库
      </el-button>
      <el-button class="btn" type="primary" @click="addCs">
        新增单面屏
      </el-button>
      <el-button class="btn" type="primary" @click="addDoubleCs">
        新增双面屏
      </el-button>
    </div>
    <Dialog
      :fields="fields"
      :title="title"
      :visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    />
    <AddCsDialog
      :visible="addCsDialogVisible"
      @close="addCsDialogHandleClose"
      @confirm="addCsDialogHandleConfirm"
    />
    <AddDoubleCsDialog
      :visible="addDoubleCsDialogVisible"
      @close="addDoubleCsDialogHandleClose"
      @confirm="addDoubleCsDialogHandleConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref } from 'vue'
  import Dialog from '../../components/dialog.vue'
  import { formFileds, titleFileds } from './form'
  import AddCsDialog from './addCsDialog.vue'
  import AddDoubleCsDialog from './addDoubleCsDialog.vue'

  const props = defineProps({
    multipleSelection: {
      type: Array as any,
      default() {
        return []
      },
    },
    companyList: {
      type: Array as any,
      default() {
        return []
      },
    },
  })
  const dialogVisible = ref(false)
  const handleClose = () => {
    dialogVisible.value = false
  }
  const fields: Ref<any[]> = ref([])
  const title: Ref<string> = ref('')
  const dialogType: Ref<string> = ref('')
  const handleOpen = (type: string) => {
    if (
      (!props.multipleSelection || props.multipleSelection.length === 0) &&
      type !== 'add'
    ) {
      ElMessage({
        message: '请选择彩屏',
        type: 'warning',
      })
      return
    }
    dialogType.value = type
    fields.value = JSON.parse(JSON.stringify(formFileds[type]))
    title.value = titleFileds[type]
    if (type === 'out') {
      fields.value[0].options = props.companyList.map((item: any) => {
        return {
          value: item.CompanyId,
          label: item.FullName,
        }
      })
    }
    dialogVisible.value = true
  }
  const emit = defineEmits(['confirm', 'addCsConfirm', 'addDoubleCsConfirm'])
  // 新增单面屏
  const addCsDialogVisible = ref(false)
  const addCs = () => {
    addCsDialogVisible.value = true
  }
  const addCsDialogHandleClose = () => {
    addCsDialogVisible.value = false
  }
  const addCsDialogHandleConfirm = (result: any) => {
    addCsDialogVisible.value = false
    emit('addCsConfirm', result)
  }

  //新增多面屏
  const addDoubleCsDialogVisible = ref(false)
  const addDoubleCs = () => {
    addDoubleCsDialogVisible.value = true
  }
  const addDoubleCsDialogHandleClose = () => {
    addDoubleCsDialogVisible.value = false
  }
  const addDoubleCsDialogHandleConfirm = (result: any) => {
    addDoubleCsDialogVisible.value = false
    emit('addDoubleCsConfirm', result)
  }

  const handleConfirm = (result: any) => {
    // console.log(result)
    if (dialogType.value === 'out' && !result[0].model) {
      ElMessage({
        message: '请选择公司',
        type: 'warning',
      })
      return
    }
    dialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
</script>

<style lang="scss" scoped>
  .tabs-container {
    .btns {
      .btn {
        margin-bottom: 8px;
      }
    }
  }
</style>
